<template>
	<view class="detailbox">
		<view class="detailbox-con">
			<!--发票上-->
			<view class="detailbox-con-top">
				<!--头部-->
				<view class="detailbox-topbox-circle">
					<view class="detailbox-topbox-circle-inner">
						<view class="detailbox-top-title">
							<text>增值税电子普通发票</text>
						</view>
					</view>
				</view>
				<view class="editbox" @click="handleEdit">
					<uni-icons type="compose" size="18" color="#296DFA"></uni-icons>
					<text>编辑</text>
				</view>
				<!--list-->
				<view class="detail-list">
					<text class="font color6">发票代码</text>
					<text class="font color3">01200021012001111111111</text>
				</view>
				<view class="detail-list">
					<text class="font color6">发票代码</text>
					<text class="font color3">012000210120011</text>
				</view>
				<view class="detail-list">
					<text class="font color6">发票代码</text>
					<text class="font color3">012000210120011</text>
				</view>
				<!-- <view>
					<view class="box1 flex-center">
						<view class="box2"></view>
					</view>
				</view> -->
			</view>
			<!--发票下-->
			<view class="detailbox-con-top">
				<view class="detail-list" @click="handleCheckFile">
					<text class="font color6">查看文件</text>
					<text class="iconfont icon-arrow"></text>
				</view>
				<view class="detail-list">
					<text class="font color6">发票代码</text>
					<text class="font color3">012000210120011</text>
				</view>
			</view>
		</view>
	</view>
	<view class="handlebtnbox" @click="handleDelete">
		<view class="handlebtn">
			<text>删除</text>
		</view>
	</view>
</template>

<script setup>
import { reactive } from 'vue'
	let ticketDetail = reactive({
		fapiaodaima:'012000210120011',
		fapiaohapma:'11307270',
	})
	//点击删除操作
	const handleDelete = () =>{
		uni.showModal({
			title: '提示',
			content: '您是否确认删除发票？',
			success: function (res) {
				if (res.confirm) {
					console.log('用户点击确定');
				} else if (res.cancel) {
					console.log('用户点击取消');
				}
			}
		});
	}
	//点击查看文件操作
	const handleCheckFile = () =>{
		uni.navigateTo({
			url:'/pages/ticketList/file'
		})
	}
	//点击编辑
	const handleEdit = () =>{
		uni.navigateTo({
			url:'/pages/ticketList/edit'
		})
	}
</script>

<style lang="scss" scoped>
	.flex-center {
	    display: flex;
	    align-items: center;
	    justify-content: center;
	  }
	  .box1 {
	    width: 160px;
	    height: 100px;
	    background: radial-gradient(circle at 0 51px, transparent 15px, #fe8864 6px)
	        top left,
	      linear-gradient(0.25turn, #fe8864, #FE5151),
	        radial-gradient(circle at 18px 51px, transparent 15px, #FE5151 16px)
	          bottom right;
	    background-size: 17px 100px, 116px 100px, 17px 100px;
	    background-repeat: no-repeat;
	    background-position: 10px 0px, 26px 0px, 142px 0px;
	  }
	  .box2 {
	    width: 100%;
	    height: 1px;
	    border-top: 2px dotted white;
	  }
	.font{
		font-family: PingFangSC-Regular;
		font-weight: 400;
		font-size: 28rpx;
		letter-spacing: 0;
	}
	.color6{
		color:#666;
	}
	.color3{
		color:#333;
	}
	.detail-list{
		display: flex;
		justify-content: space-between;
		align-items: center;
		height:40rpx;
		line-height: 40rpx;
		margin-bottom:24rpx;
	}
	.detailbox{
		height:100vh;
		background:linear-gradient(180deg, #296DFA 0%, #FFFFFF 100%);
		// background:radial-gradient(circle at 51px 0, transparent 50%, #296DFA);
		.detailbox-con{
			padding:24rpx;
			.detailbox-con-top{
				position:relative;
				padding:54rpx 32rpx 24rpx;
				margin-bottom:24rpx;
				border-radius:16rpx;
				background: #FFFFFF;
				box-shadow: 0 0 16rpx 0 #34394314;
				.detailbox-topbox-circle{
					position: relative;
					width:202rpx;
					height:88rpx;
					margin:0 auto 32rpx;
					border-radius:70%;
					border: 8rpx solid #FFD6D6;
					.detailbox-topbox-circle-inner{
						margin:5rpx auto 0;
						width:192rpx;
						height:78rpx;
						border-radius:70%;
						border: 2rpx solid #FFD6D6;
						.detailbox-top-title{
							position: absolute;
							top:20rpx;
							left:50%;
							margin-left:-250rpx;
							width:500rpx;
							text-align: center;
							font-family: PingFangSC-Medium;
							font-weight: 500;
							font-size: 32rpx;
							color: #8C4815;
							letter-spacing: 4rpx;
						}
					}
				}
				.editbox{
					position:absolute;
					right:28rpx;
					top:86rpx;
					display: flex;
					align-items: center;
					font-family: PingFangSC-Regular;
					font-weight: 400;
					font-size: 28rpx;
					color: #296DFA;
				}
			}
			
		}
	}
	.handlebtnbox{
		position:fixed;
		left:0;
		bottom:0;
		width:100%;
		padding:32rpx 0;
		background: #FFFFFF;
		box-shadow: 0 2rpx 20rpx 0 #d1d1d145;
		.handlebtn{
			height: 80rpx;
			line-height: 80rpx;
			margin:0 32rpx;
			text-align:center;
			border: 2rpx solid #D9D9D9;
			border-radius: 40rpx;
			font-family: PingFangSC-Regular;
			font-weight: 400;
			font-size: 32rpx;
			color: #296DFA;
		}
	}
</style>